<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px">
        <MainNavigation :goto="tabComponent" @changeComponent="change" />
      </el-aside>
      <el-container>
        <el-header style="border-top: solid gainsboro;border-bottom: solid gainsboro;">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <el-icon>
                <Link />
              </el-icon>学生管理系统</el-breadcrumb-item>
            <el-breadcrumb-item>{{ mainComponent }}</el-breadcrumb-item>
          </el-breadcrumb>
         <el-avatar :src="avatarURL" fit="fill" style="position: relative; top:-30px; left: 760px;"/>
        </el-header>
        <el-main>
          <component :is="tabComponent"></component>
          <!-- <TeacherTable/> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import MainNavigation from '@/components/MainNavigation.vue';
import StudentTable from "@/components/StudentTable.vue"
import AddStudentTable from "@/components/AddStudentTable.vue"
import QueryStudentTable from "@/components/QueryStudentTable"
import TeacherTable from "@/components/TeacherTable"
import QueryTeacherTable from "@/components/QueryTeacherTable.vue"
import UpdateUserForm from "@/components/UpdateUserForm.vue"
import UpdatePasswordForm from "@/components/UpdatePasswordForm"

export default {
  components: {
    MainNavigation,
    StudentTable,
    AddStudentTable,
    QueryStudentTable,
    TeacherTable,
    QueryTeacherTable,
    UpdateUserForm,
    UpdatePasswordForm
  },
  data() {
    return {
      tabComponent: "StudentTable",
      mainComponent: "查看学生信息",
    }
  },
  mounted() { 
  },
  methods: {
    change(data) {
      // console.log(data);
      this.tabComponent = data;
    }
  },
  computed:{
    avatarURL(){
      return this.$store.state.avatarURL;
    }
  },
  watch: {
    tabComponent(newitem, olditem) {
      if (newitem == "StudentTable") {
        this.mainComponent = "查看学生信息";
        return;
      }
      if (newitem == "AddStudentTable") {
        this.mainComponent = "添加学生信息";
        return;
      }
      if (newitem == "QueryStudentTable") {
        this.mainComponent = "查询学生信息";
        return;
      }
      if (newitem == "TeacherTable") {
        this.mainComponent = "查看教师信息";
        return;
      }
      if (newitem == "QueryTeacherTable") {
        this.mainComponent = "查询教师信息";
        return;
      }
      if(newitem == "UpdateUserForm"){
        this.mainComponent="修改个人信息";
        return;
      }
      if(newitem == "UpdatePasswordForm"){
        this.mainComponent="修改密码";
        return;
      }
    }
  }
}
</script>

<style scoped>
.el-breadcrumb {
  margin-top: 20px;
}

.el-breadcrumb__item {
  font-size: 16px;
}
</style>